<template>
  <div id="first">
    <div class="content">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-button type="primary" icon="el-icon-plus" @click="addInfo">添加账号</el-button>
        </el-col>
        <el-col :span="6" :offset="9">
          <el-input type="text" placeholder="请输入关键字查询"></el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" plain>搜索</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="list"
        :header-row-class-name="'table_header'"
        :height="list.length>0?400:110"
        :empty-text="'系统未检索到相关结果…'"
        class="el_t_20"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="name" label="账号名/姓名" width="100"></el-table-column>
        <el-table-column prop="sex" label="性别" width="80"></el-table-column>
        <el-table-column prop="phone" label="联系方式" width="120"></el-table-column>
        <el-table-column prop="name" label="账号角色" width="100"></el-table-column>
        <el-table-column prop="time" label="所属科室" min-width="150"></el-table-column>
        <el-table-column prop="state" label="状态" width="80">
          <template slot-scope="data">{{data.row.state?'正常':'冻结'}}</template>
        </el-table-column>
        <el-table-column prop="name" label="操作" fixed="right" width="280">
          <template slot-scope="data">
            <el-button type="primary" plain size="mini" v-if="data.row.state">查看/编辑</el-button>
            <el-button
              type="primary"
              plain
              size="mini"
              v-if="data.row.state"
              @click="resetPassword"
            >重置密码</el-button>
            <el-button
              type="primary"
              plain
              size="mini"
              @click="free(data.row)"
            >{{data.row.state?'冻结':'解冻'}}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="text-right el_t_20 page_box" v-if="list.length > 0">
        <el-pagination
          :current-page="1"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="list.length"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "first",
  data() {
    return {
      search: {
        name: ""
      },
      list: [
        {
          name: "胡忠信",
          sex: "男",
          birthday: "1956-12-10",
          no: "1812100102",
          phone: "15645541321",
          time: "2018-12-10 14:23:32",
          state: true,
          remark: "睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍"
        },
        {
          name: "胡忠信",
          sex: "男",
          birthday: "1956-12-10",
          no: "1812100102",
          phone: "15645541321",
          time: "2018-12-10 14:23:32",
          state: true,
          remark: "睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍"
        },
        {
          name: "胡忠信",
          sex: "男",
          birthday: "1956-12-10",
          no: "1812100102",
          phone: "15645541321",
          time: "2018-12-10 14:23:32",
          state: true,
          remark: "睡眠障碍"
        },
        {
          name: "胡忠信",
          sex: "男",
          birthday: "1956-12-10",
          no: "1812100102",
          phone: "15645541321",
          time: "2018-12-10 14:23:32",
          state: true,
          remark: "睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍"
        },
        {
          name: "胡忠信",
          sex: "男",
          birthday: "1956-12-10",
          no: "1812100102",
          phone: "15645541321",
          time: "2018-12-10 14:23:32",
          state: false,
          remark: "睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍"
        }
      ]
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      return row.state ? "" : "freeze";
    },
    addInfo() {
      this.$router.push({ name: "addAccount" });
    },
    resetPassword() {
      this.$confirm("确定重置该账号密码？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "点错了",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "取消成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    free(data) {
      let str = data.state ? "确定冻结该账号？" : "确定解冻该账号？";
      this.$confirm(str, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "点错了",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "取消成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    deleteMsg(data) {
      this.$confirm("确定删除该条记录？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "点错了",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "取消成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    }
  }
};
</script>

<style scoped>
.content {
  height: calc(100vh - 144px);
  background: #ffffff;
  position: relative;
  padding: 20px;
}
</style>
